<li *ngFor="let serviceLog of serviceLogs; let i = index">
    <div class="log" *ngIf="!loading">
        <div class="logHeader pointing" (click)="showLog[i] = !showLog[i]">
            <div class="title">
                <i class="chevron down icon" *ngIf="showLog[i]"></i>
                <i class="chevron right icon" *ngIf="!showLog[i]"></i>
                {{serviceLog.requirement_service_name}}
            </div>
        </div>
        <div class="logs" *ngIf="showLog[i]">
            <div class="right floated">
              <button class="ui icon button copyButton" [title]="'common_copy_clipboard' | translate" (click)="copyRawLog(serviceLog)">
                <i class="copy icon"></i>
              </button>
            </div>
            <!-- Pay attention ! Don't write any spaces, tabs or line between <pre> and <table> -->
            <pre><table class="ui very basic table">
                <tbody>
                  <ng-container *ngFor="let logLine of serviceLog.logsSplitted; let index = index; let last = last;">
                    <tr *ngIf="!last">
                      <td class="number yellow right aligned">{{index + 1}}</td>
                      <td [innerHTML]="logLine"></td>
                    </tr>
                  </ng-container>
                </tbody>
              </table></pre>
            <textarea class="fakeInput" name="fakeInput" #logsContent></textarea>
        </div>
    </div>
    <div class="ui active centered inline loader" *ngIf="loading"></div>
</li>
